<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body>
<div id="app">
    <template>

        <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
            <el-descriptions-item>
                <template slot="label" >
                    <i class="el-icon-user"></i>
                    姓名
                </template>
              {{text.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    性别
                </template>
                {{text.sex}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    居住地
                </template>
                {{text.address}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    年龄
                </template>
                {{text.age}}
            </el-descriptions-item>

            <el-descriptions-item >
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    身份证号
                </template>
                {{text.idcard}}
            </el-descriptions-item>
        </el-descriptions>
        <el-button type="primary" @click="showSubmitForm()">修改个人信息</el-button>
        <el-button type="primary" @click="mainn('text')">返回</el-button>
    </template>
    <el-dialog title="修改个人信息" :visible.sync="updateDialogFormVisible" >
        <el-form id="xixi"  :model="textInfo" :rules="rules" ref="textInfo">
            <el-form-item  prop="id" >
               <input name="id" v-model="textInfo.id" type="hidden"/>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name" >
                <el-input
                        name="name"
                        placeholder="请输入姓名"
                        v-model="textInfo.name"
                        show-word-limit

                >
                </el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-input
                        name="sex"
                        placeholder="性别"
                        v-model="textInfo.sex"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
            <el-form-item label="学生年龄"  prop="age"  >
                <el-input
                        name="age"
                        placeholder="年龄"
                        v-model="textInfo.age"
                        show-word-limit

                >
                </el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address" >
                <el-input
                        name="address"
                        placeholder="居住地"
                        v-model="textInfo.address"
                        show-word-limit
                >
                </el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="idcard" >
                <el-input
                        name="idcard"
                        placeholder="身份证号"
                        v-model="textInfo.idcard"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm()">确认修改</el-button>
                <el-button type="primary"  @click="resetForm()">返回</el-button>
            </el-form-item>

        </el-form>



    <script>
            $.get("/demo/personalInfo/getPersonalInfo",function (backData) {
                haha.text=backData.data;
            });

        var haha=new Vue({
            el:"#app",
            data:{
                textInfo:{},
                size:"",
                text:{},
                updateDialogFormVisible:false,
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' },
                            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                            {
                                required: true,
                                pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                                message: '姓名不支持特殊字符',
                                trigger: 'blur'
                            }
                        ],
                        idcard: [
                            { required: true, message: '请输入身份证号', trigger: 'blur' },
                            { min: 15, max: 18, message: '请如实填写18位号码，以供医院核对', trigger: 'blur' },
                            {
                                required: true,
                                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                                message: '请输入正确的身份证号码',
                                trigger: 'blur'
                            }
                        ],
                        age: [
                            { required: true, message: '请输入年龄', trigger: 'blur' }
                        ]

                }
            },
            methods:{
                mainn(){
                   window.location.href="/demo/userr/main.html"

                },
                showSubmitForm() {
                    $.get("/demo/personalInfo/get?id="+haha.text.id,function (backData) {
                        haha.textInfo=backData.data;

                    })
                    haha.updateDialogFormVisible=true;
                },
                submitForm(){

                    /*var stuData = new FormData(xixi);
                    $.ajax({
                        url:"/demo/personalInfo/update",
                        type:"POST",
                        data:stuData,
                        processData:false,
                        contentType:false,
                });*/
                    haha.$refs["textInfo"].validate((valid) => {
                        if (valid) {
                            var stuData = new FormData(xixi);
                            $.ajax({
                                url:"/demo/personalInfo/update",
                                type:"POST",
                                data:stuData,
                                processData:false,
                                contentType:false,
                                success:function (backData) {
                                    haha.$message({
                                        message: backData.msg,
                                        type: 'success',
                                    });
                                    haha.updateDialogFormVisible = false;
                                    window.location.reload();
                                }
                            });
                        }
                    });


                },
                resetForm(){
                    haha.updateDialogFormVisible=false;
                }

            },

        });
    </script>
</div>
</body>
</html>